<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
		  <el-breadcrumb-item>商品分类</el-breadcrumb-item>
		  
		</el-breadcrumb>
		<!-- 卡片视图 -->
		<el-card>
			<el-row>
				<el-col>
					<el-button type="primary" @click="showAddCateDialog">添加商品</el-button>
				</el-col>
			</el-row>
		   <!-- 表格 -->
			 <tree-table :data="cateList" :columns="columns" :selection-type="false"
			 :expand-type="false" :show-index="true" index-text="#" border :show-row-hover="false" 
			 class="treeTable">
			 <!-- //是否有效 -->
			 <template v-slot:isok="scope">
				<i class="el-icon-success" v-if="scope.row.cat_deleted===false" style="color: lightgreen;
				font-size: 19px;"></i>
				<i class="el-icon-error" v-else style="color: red;"></i>
			 </template>
			 <!-- 排序 -->
			 <template v-slot:order="scope">
				 <el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
				 <el-tag type="success" size="mini" v-else-if="scope.row.cat_level===1">二级</el-tag>
				 <el-tag type="warning" size="mini" v-else>三级</el-tag>
			 </template>
			 <!-- 编辑 -->
			 <template v-slot:opt="scope">
				 <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
				 <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
			 </template>
			 </tree-table>
			 <!-- 分页 -->
			  <el-pagination
			       @size-change="handleSizeChange"
			       @current-change="handleCurrentChange"
			       :current-page.sync="querInfo.pagenum"
			       :page-sizes="[1,2,5,10]"
						 :page-size="querInfo.pagesize"
			       layout="total, sizes, prev, pager, next, jumper"
			       :total="Total">
			     </el-pagination>
		</el-card>
	
	<!-- 添加分类的对话框 -->
	<el-dialog
	  title="添加分类"
	  :visible.sync="addCateDialogVisible"
	  width="50%" @close="addCateDialogClosed">
	 <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px">
	   <el-form-item label="分类名称" prop="cat_name">
	     <el-input v-model="addCateForm.cat_name"></el-input>
	   </el-form-item>
	</el-form> 
	<el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef1" label-width="100px">
	   <el-form-item label="父级分类">
	    <el-cascader
	         :options="parentCateList"
	         :props="cascaderProps"
	         @change="parentCateChange"
					 v-model='selectedkeys' clearable>
			 </el-cascader>
	   </el-form-item>
	</el-form> 
	
	  <span slot="footer" class="dialog-footer">
	    <el-button @click="addCateDialogVisible = false">取 消</el-button>
	    <el-button type="primary" @click="addCate">确 定</el-button>
	  </span>
	</el-dialog>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				//选中的父级分类的id数组
				selectedkeys:[],
				//指定配置对象
				cascaderProps:{
					value:'cat_id',
					label:"cat_name",
					children:'children',
					expandTrigger: 'hover',
					checkStrictly:true
				},
				//父级分类的列表
				parentCateList:[],
				//添加分类表单的验证 规则
				addCateFormRules:{
					cat_name:[{
						required:true,message:'请输入分类的名称',tigger:'blur'
					}]
				},
				
				//添加分类的表单对话对象
				addCateForm:{
					cat_name:'',
					cat_pid:0,
					cat_level:0,
				},
				//控制添加分类对话框的显示与隐藏
				addCateDialogVisible:false,
				//查询条件
				querInfo:{
					type:3,
					pagenum:1,
					pagesize:5
				},
				//商品分类的数据列表
				cateList:[],
				//总数居数量
				Total:0,
				//为table指定列的定义
				columns:[{
					label:'分类名称',
					prop:'cat_name',
					
				},
				{
					label:'是否有效',
					//将当前列定义为模板列
					type:'template',
					//当前模板列使用的名称
					template:'isok'
				},
				{
					label:'排序',
					//将当前列定义为模板列
					type:'template',
					//当前模板列使用的名称
					template:'order'
				},
				{
					label:'操作',
					//将当前列定义为模板列
					type:'template',
					//当前模板列使用的名称
					template:'opt'
				}]
			}
		},
		created() {
			this.getCateList()
		},
		methods:{
			//监听对话框的关闭事件
			addCateDialogClosed(){
				this.$refs.addCateFormRef.resetFields()
				this.selectedkeys=''
				this.addCateForm.cat_level=0
				this.addCateForm.cat_pid=0
			},
			//点击按钮添加新的分类
		addCate(){
				console.log(this.addCateForm)
				this.$refs.addCateFormRef.validate(valid=>{
					if(!valid) return 
			 this.$http.post('categories',this.addCateForm).then(res=>{
				if(res.data.meta.status!==201) return this.$message.info('添加失败')
				this.$message.success('添加成功')
				this.getCateList()
				this.addCateDialogVisible=false
			      })
			
				})
			},
			parentCateChange(){
				//选择项发生变化触发
				console.log(this.selectedkeys)
				//如果selectedKeys 数组里面的length大于0 说明选中了父级分类
				if(this.selectedkeys.length!==0){
					//父级分类的id
				this.addCateForm.cat_pid=	this.selectedkeys[this.selectedkeys.length-1]
				//为当前分类的等级赋值
				this.addCateForm.cat_level=this.selectedkeys.length
				return 
				}else{
						this.addCateForm.cat_pid=0
						this.addCateForm.cat_level=0
				}
			},
			//父级分类的数据列表
		async	getParentCateList(){
		const {data:res}=	await	this.$http.get('categories',{params:{type:2}})
		if(res.meta.status!==200) return this.$message.info('获取父级分类失败')
		this.parentCateList=res.data
		console.log(this.parentCateList)
			},
			showAddCateDialog(){
				//获取父级分类的数据列表
				this.getParentCateList()
				//点击按钮展示对话框
				this.addCateDialogVisible=true
			},
			//获取商品分类数据
			async getCateList(){
		const {data:res}	=await	this.$http.get('categories',{params:this.querInfo})
		console.log(res)
		if(res.meta.status!==200) return this.$message.info('获取商品列表失败')
		this.cateList=res.data.result
		//为总数居条数赋值
		this.Total=res.data.total
			},
			//监听pageSize改变的事件
			handleSizeChange(newPageSize){
				this.querInfo.pagesize=newPageSize;
				this.getCateList()
			},
			//监听pageNUm的改变
			handleCurrentChange(newPageNum){
				this.querInfo.pagenum=newPageNum;
				this.getCateList()
			}
		}
	}
</script>

<style scoped="scoped" lang="less">
	.treeTable{
		margin-top: 15px;
	}
	.el-cascader{
		width: 100%;
	}
</style>
